<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>美女相册.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        img{
            display: block;
        }

        .container {
            width: 800px;
            background-color: antiquewhite;
            margin: 0 auto;
        }

        .header {
            margin-top: 50px;
        }

        .header ul li {
            float: left;
        }

        .list img {
            width: 200px;
            height: 120px;
        }

        .center{
            width: 800px;
            height: 480px;
        }

        .center img {
            width: 800px;
            height: 480px;
        }

        .footer p {
            font-size: 25px;
            color: black;
            font-family: '黑体';
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <ul class="list clearfix">
            <li src="images/5.jpg" title="图片1"><img src="images/1.jpg"></li>
            <li src="images/6.jpg" title="图片2"><img src="images/2.jpg"></li>
            <li src="images/7.jpg" title="图片3"><img src="images/3.jpg"></li>
            <li src="images/bg.jpg" title="图片4"><img src="images/4.jpg"></li>
        </ul>
    </div>
    <div class="center">
        <img src="" alt="请选择一张图片">
    </div>
    <div class="footer">
        <p>请选择一张图片</p>
    </div>
</div>
</body>
<script>
    $(function (){
        $('.list>li').click(function (){
            let src = $(this).attr('src')
            let title = $(this).attr('title')
            $('.center>img').attr('src', src)
            $('.footer>p').text(title)
        })
    })
</script>
</html>